import {Avatar, Card, Col, Row} from "antd";
import {SettingOutlined,EditOutlined,EllipsisOutlined} from '@ant-design/icons';
import {forwardRef, useEffect, useImperativeHandle, useState} from "react";
import {projectListApi} from "../../Api/researchProject.ts";
const { Meta } = Card;

const ProjectBox = (props,ref) => {
    const [projectList,setProjectList] = useState([])
    //用useImperativeHandle暴露一些外部ref能访问的属性
    useImperativeHandle(ref, () => {
        return {
            query: ()=>{
                getProjectList()
            },
        };
    });
    useEffect(() => {
        getProjectList()
    }, []);
    async function getProjectList(){
        const params = {
            name:props.projectName||undefined
        }
        const {code,data} = await projectListApi(params)
        if(code===0){
            setProjectList(data)
        }
    }
    enum ProjectType{
        '1'='meta分析',
        '3'='孟德尔随机化'
    }
    return (
        <Row gutter={16} style={{marginTop:20,height:'calc(100vh - 200px)',overflowY:'auto'}}>
            {
                projectList.map((item:any)=>{
                    return (
                        <Col span={6} style={{marginBottom:10}}>
                            <Card
                                title={item.name}
                                cover={
                                    <img
                                        alt="example"
                                        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                                    />
                                }
                                actions={[
                                    <SettingOutlined key="setting" />,
                                    <EditOutlined key="edit" />,
                                    <EllipsisOutlined key="ellipsis" />,
                                ]}
                            >
                                <Meta
                                    avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />}
                                    title={ProjectType[item.projectType]}
                                    description={item.createTime}
                                />
                            </Card>
                        </Col>
                    )
                })
            }
        </Row>
    )
}

export default forwardRef(ProjectBox);